<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar">
			<view class="left">
				<text class="time">9:41</text>
			</view>
			<view class="right">
				<view class="signal"></view>
				<view class="wifi"></view>
				<view class="battery"></view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar" @click="goToSearch">
				<view class="scan-icon">📱</view>
				<input class="search-input" placeholder="搜索商品" disabled />
				<button class="search-btn">搜索</button>
			</view>
		</view>

		<!-- 位置选择 -->
		<view class="location-tabs">
			<view class="tab-item" :class="{ active: activeLocation === 'local' }" @click="setActiveLocation('local')">
				<text class="tab-text">本地</text>
			</view>
			<view class="tab-item" :class="{ active: activeLocation === 'national' }" @click="setActiveLocation('national')">
				<text class="tab-text">全国</text>
			</view>
			<view class="tab-item">
				<text class="tab-text">⋯</text>
			</view>
			<view class="profile-icon" @click="goToProfile">👤</view>
		</view>

		<!-- 水平分类导航 -->
		<scroll-view class="horizontal-categories" scroll-x="true" show-scrollbar="false">
			<view class="category-item" v-for="(category, index) in horizontalCategories" :key="index" @click="selectHorizontalCategory(index)">
				<view class="category-icon">{{category.icon}}</view>
				<text class="category-name">{{category.name}}</text>
			</view>
			<view class="all-categories" @click="showAllCategories">
				<text class="all-text">全部</text>
				<view class="menu-icon">☰</view>
			</view>
		</scroll-view>

		<!-- 排序和筛选 -->
		<view class="sort-filter">
			<view class="sort-item" :class="{ active: activeSort === 'comprehensive' }" @click="toggleSort('comprehensive')">
				<text class="sort-text">综合</text>
				<view class="arrow" :class="{ up: sortDirection.comprehensive === 'up' }">▼</view>
			</view>
			<view class="sort-item" :class="{ active: activeSort === 'price' }" @click="toggleSort('price')">
				<text class="sort-text">价格</text>
				<view class="arrow" :class="{ up: sortDirection.price === 'up' }">▼</view>
			</view>
			<view class="sort-item active" @click="toggleSort('filter')">
				<text class="sort-text">筛选</text>
				<view class="arrow">▼</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 左侧垂直分类列表 -->
			<scroll-view class="left-sidebar" scroll-y="true" show-scrollbar="false">
				<view 
					class="sidebar-item" 
					v-for="(item, index) in sidebarCategories" 
					:key="index"
					:class="{ active: activeSidebarIndex === index }"
					@click="selectSidebarCategory(index)"
				>
					<text class="sidebar-text">{{item.name}}</text>
					<view class="arrow" v-if="item.hasArrow">▼</view>
				</view>
			</scroll-view>

			<!-- 右侧商品列表 -->
			<scroll-view class="product-list" scroll-y="true" show-scrollbar="false" @scrolltolower="loadMore">
				<view class="product-item" v-for="(product, index) in products" :key="index" @click="goToProduct(product)">
					<view class="product-image-container">
						<image class="product-image" :src="product.image" mode="aspectFill" @error="handleImageError"></image>
						<view class="product-tags">
							<view class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{tag}}</view>
						</view>
						<view class="product-badge" v-if="product.badge">{{product.badge}}</view>
					</view>
					
					<view class="product-info">
						<text class="product-title">{{product.title}}</text>
						<text class="product-desc" v-if="product.description">{{product.description}}</text>
						<text class="product-spec">{{product.specification}}</text>
						
						<view class="price-section">
							<view class="price-info">
								<text class="current-price">¥{{product.currentPrice}}</text>
								<text class="original-price" v-if="product.originalPrice !== product.currentPrice">¥{{product.originalPrice}}</text>
							</view>
							
							<view class="action-section">
								<view class="quantity-selector" v-if="product.showQuantity">
									<button class="quantity-btn" @click.stop="decreaseQuantity(index)" :disabled="product.quantity <= 1">-</button>
									<text class="quantity-text">{{product.quantity}}</text>
									<button class="quantity-btn" @click.stop="increaseQuantity(index)">+</button>
								</view>
								<view class="cart-icon" v-else @click.stop="addToCart(product)">
									<text class="cart-text">🛒</text>
								</view>
							</view>
						</view>
						
						<view class="product-actions">
							<button class="frequent-btn" v-if="product.isFrequent" @click.stop="markAsFrequent(product)">经常购买</button>
							<text class="min-order" v-if="product.minOrder">起订{{product.minOrder}}</text>
						</view>
						
						<view class="price-estimate" v-if="product.estimatePrice">
							<view class="lightning-icon">⚡</view>
							<text class="estimate-text">预计到手价 {{product.estimatePrice}}</text>
						</view>
						
						<view class="product-footer">
							<text class="stock-info" v-if="product.stock">库存:{{product.stock}}</text>
							<text class="sales-info" v-if="product.sales">已售{{product.sales}}</text>
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" v-if="hasMore">
					<text class="load-text">加载中...</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Navigation from '@/utils/navigation.js';
	import Auth from '@/utils/auth.js';
	
	export default {
		data() {
			return {
				activeLocation: 'local',
				activeSidebarIndex: 0,
				activeSort: 'filter',
				sortDirection: {
					comprehensive: 'down',
					price: 'down'
				},
				hasMore: true,
				horizontalCategories: [
					{ name: '中外名酒', icon: '🍷' },
					{ name: '中外名酒', icon: '🍷' },
					{ name: '中外名酒', icon: '🍷' },
					{ name: '冲调食品', icon: '🥜' },
				],
				sidebarCategories: [
					{ name: '今日优惠', hasArrow: true },
					{ name: '冲调食品', hasArrow: false },
					{ name: '水乳饮品', hasArrow: false },
					{ name: '包装食品', hasArrow: false },
					{ name: '散装食品', hasArrow: false },
					{ name: '米面油', hasArrow: false },
					{ name: '调味品', hasArrow: false },
					{ name: '方便速食', hasArrow: false }
				],
				products: [
					{
						image: '/static/product1.png',
						tags: ['满减', '满赠', '买赠'],
						title: '秒杀豆蟹黄味2.5KG/袋',
						description: '(可单包销售约155小包/...)',
						specification: '1箱*2袋*约155小包 | 2024-09-12',
						currentPrice: '20.9',
						originalPrice: '30.5',
						showQuantity: true,
						quantity: 66,
						isFrequent: true,
						estimatePrice: '20.9',
						stock: null,
						sales: '1.2万',
						badge: '热销'
					},
					{
						image: '/static/product2.png',
						tags: ['满减'],
						title: '特价 30度1件+即酒45度1件(组合促销装)',
						description: '',
						specification: '一组',
						currentPrice: '345.9',
						originalPrice: '600.6',
						showQuantity: false,
						estimatePrice: '20.9',
						stock: 19,
						sales: '5.6千',
						badge: '限时'
					},
					{
						image: '/static/product3.png',
						tags: [],
						title: '特价促销 根(奥尔良味)',
						description: '',
						specification: '70g | 1箱*20包 | 2024-09-20',
						currentPrice: '19.9',
						originalPrice: '30.5',
						showQuantity: false,
						minOrder: 20,
						isFrequent: true,
						estimatePrice: '20.9',
						stock: 19,
						sales: '8.9千'
					},
					{
						image: '/static/product4.png',
						tags: [],
						title: '特价促销 根(奥尔良味)',
						description: '',
						specification: '70g | 1箱*20包 | 2024-09-20',
						currentPrice: '19.9',
						originalPrice: '30.5',
						showQuantity: false,
						minOrder: 20,
						isFrequent: true,
						estimatePrice: '20.9',
						stock: 19,
						sales: '3.4千'
					}
				]
			}
		},
		onLoad() {
			// 检查登录状态
			this.checkLoginStatus();
		},
		onShow() {
			// 每次显示页面时检查登录状态
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				// 检查是否已登录，如果未登录则跳转到登录页
				if (!Auth.isLoggedIn()) {
					Navigation.goToLogin();
				}
			},
			goToSearch() {
				Navigation.goToSearch();
			},
			goToProfile() {
				Navigation.goToProfile();
			},
			setActiveLocation(location) {
				this.activeLocation = location;
				// 根据位置重新加载商品
				this.loadProductsByLocation(location);
			},
			selectHorizontalCategory(index) {
				console.log('选择水平分类:', this.horizontalCategories[index]);
				// 可以添加选中状态的视觉反馈
			},
			showAllCategories() {
				console.log('显示全部分类');
				// 可以弹出全部分类选择器
			},
			toggleSort(type) {
				if (type === 'filter') {
					this.activeSort = type;
					// 显示筛选弹窗
					this.showFilterModal();
				} else {
					this.activeSort = type;
					// 切换排序方向
					this.sortDirection[type] = this.sortDirection[type] === 'down' ? 'up' : 'down';
					// 重新排序商品
					this.sortProducts(type, this.sortDirection[type]);
				}
			},
			showFilterModal() {
				// 显示筛选弹窗
				uni.showToast({
					title: '筛选功能开发中',
					icon: 'none'
				});
			},
			sortProducts(type, direction) {
				// 商品排序逻辑
				console.log('排序商品:', type, direction);
			},
			selectSidebarCategory(index) {
				this.activeSidebarIndex = index;
				this.loadProductsByCategory(this.sidebarCategories[index].name);
			},
			loadProductsByCategory(category) {
				console.log('加载分类商品:', category);
				// 这里可以添加加载动画
				uni.showLoading({
					title: '加载中...'
				});
				
				// 模拟加载延迟
				setTimeout(() => {
					uni.hideLoading();
				}, 500);
			},
			loadProductsByLocation(location) {
				console.log('根据位置加载商品:', location);
			},
			goToProduct(product) {
				Navigation.goToProduct({
					id: product.id || '1',
					name: product.title
				});
			},
			decreaseQuantity(index) {
				if (this.products[index].quantity > 1) {
					this.products[index].quantity--;
				}
			},
			increaseQuantity(index) {
				this.products[index].quantity++;
			},
			addToCart(product) {
				console.log('添加到购物车:', product);
				uni.showToast({
					title: '已添加到购物车',
					icon: 'success',
					duration: 1500
				});
			},
			markAsFrequent(product) {
				console.log('标记为经常购买:', product);
				uni.showToast({
					title: '已添加到经常购买',
					icon: 'success'
				});
			},
			loadMore() {
				if (this.hasMore) {
					console.log('加载更多商品');
					// 这里可以添加加载更多商品的逻辑
				}
			},
			handleImageError(e) {
				console.log('图片加载失败:', e);
				// 可以设置默认图片
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.left, .right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.time {
	font-size: 28rpx;
	font-weight: bold;
}

.search-section {
	padding: 20rpx 30rpx;
	background-color: #fff;
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: #f8f8f8;
	border-radius: 50rpx;
	padding: 15rpx 20rpx;
	transition: all 0.3s ease;
}

.search-bar:active {
	background-color: #f0f0f0;
	transform: scale(0.98);
}

.scan-icon {
	margin-right: 15rpx;
	font-size: 32rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
}

.search-btn {
	background-color: #ff6b35;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 10rpx 20rpx;
	font-size: 24rpx;
	transition: all 0.3s ease;
}

.search-btn:active {
	background-color: #ff8c42;
	transform: scale(0.95);
}

.location-tabs {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	border-radius: 20rpx;
	transition: all 0.3s ease;
}

.tab-item.active {
	background-color: #ff6b35;
	color: white;
	transform: scale(1.05);
}

.tab-text {
	font-size: 26rpx;
}

.profile-icon {
	margin-left: auto;
	font-size: 40rpx;
	transition: all 0.3s ease;
}

.profile-icon:active {
	transform: scale(0.9);
}

.horizontal-categories {
	display: flex;
	padding: 20rpx 30rpx;
	background-color: #fff;
	white-space: nowrap;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 30rpx;
	min-width: 120rpx;
	transition: all 0.3s ease;
}

.category-item:active {
	transform: scale(0.95);
}

.category-icon {
	font-size: 40rpx;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}

.all-categories {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 20rpx;
	transition: all 0.3s ease;
}

.all-categories:active {
	transform: scale(0.95);
}

.all-text {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 5rpx;
}

.menu-icon {
	font-size: 20rpx;
	color: #666;
}

.sort-filter {
	display: flex;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;
}

.sort-item {
	display: flex;
	align-items: center;
	margin-right: 40rpx;
	transition: all 0.3s ease;
}

.sort-item.active {
	color: #ff6b35;
}

.sort-item:active {
	transform: scale(0.95);
}

.sort-text {
	font-size: 26rpx;
	margin-right: 5rpx;
}

.arrow {
	font-size: 20rpx;
	transition: transform 0.3s ease;
}

.arrow.up {
	transform: rotate(180deg);
}

.main-content {
	display: flex;
	height: calc(100vh - 400rpx);
}

.left-sidebar {
	width: 200rpx;
	background-color: #fff;
	border-right: 1rpx solid #eee;
}

.sidebar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.sidebar-item.active {
	background-color: #fff5f0;
	color: #ff6b35;
	border-left: 4rpx solid #ff6b35;
}

.sidebar-item:active {
	background-color: #f0f0f0;
}

.sidebar-text {
	font-size: 26rpx;
}

.product-list {
	flex: 1;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.product-item {
	background-color: #fff;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	transition: all 0.3s ease;
}

.product-item:active {
	transform: scale(0.98);
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.product-image-container {
	position: relative;
	margin-bottom: 15rpx;
}

.product-image {
	width: 100%;
	height: 200rpx;
	border-radius: 10rpx;
}

.product-tags {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	display: flex;
	gap: 5rpx;
}

.tag {
	background-color: #ff4757;
	color: white;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: 20rpx;
}

.product-badge {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	background-color: #ff6b35;
	color: white;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: 20rpx;
}

.product-info {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.product-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
}

.product-desc {
	font-size: 24rpx;
	color: #666;
}

.product-spec {
	font-size: 22rpx;
	color: #999;
}

.price-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15rpx 0;
}

.price-info {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.current-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: bold;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.action-section {
	display: flex;
	align-items: center;
}

.quantity-selector {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.quantity-btn {
	width: 50rpx;
	height: 50rpx;
	border: 1rpx solid #ddd;
	background-color: #fff;
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	transition: all 0.3s ease;
}

.quantity-btn:active {
	background-color: #f0f0f0;
	transform: scale(0.9);
}

.quantity-btn[disabled] {
	opacity: 0.5;
	color: #ccc;
}

.quantity-text {
	font-size: 26rpx;
	color: #333;
	min-width: 40rpx;
	text-align: center;
}

.cart-icon {
	font-size: 40rpx;
	color: #ff6b35;
	transition: all 0.3s ease;
}

.cart-icon:active {
	transform: scale(0.9);
}

.product-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 10rpx 0;
}

.frequent-btn {
	background-color: #f5f5f5;
	color: #666;
	border: none;
	padding: 8rpx 16rpx;
	border-radius: 15rpx;
	font-size: 22rpx;
	transition: all 0.3s ease;
}

.frequent-btn:active {
	background-color: #e0e0e0;
	transform: scale(0.95);
}

.min-order {
	font-size: 22rpx;
	color: #666;
}

.price-estimate {
	display: flex;
	align-items: center;
	gap: 10rpx;
	background-color: #fff5f0;
	padding: 10rpx 15rpx;
	border-radius: 10rpx;
	margin: 10rpx 0;
}

.lightning-icon {
	font-size: 24rpx;
	color: #ff6b35;
}

.estimate-text {
	font-size: 24rpx;
	color: #ff6b35;
}

.product-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
}

.stock-info {
	font-size: 22rpx;
	color: #666;
}

.sales-info {
	font-size: 22rpx;
	color: #999;
}

.load-more {
	text-align: center;
	padding: 30rpx;
}

.load-text {
	font-size: 24rpx;
	color: #999;
}
</style>
